<script setup name="App">
import TodoHeader from './components/TodoHeader/index.vue'
import TodoMain from './components/TodoMain/index.vue'
import TodoFooter from './components/TodoFooter/index.vue'
import useStore from './store'

const { todos } = useStore()
// 表示 todos 里面只要有数据发生变化，就会触发回调
todos.$subscribe(() => {
  // 重新存储一下 todos.list
  localStorage.setItem('TODOS', JSON.stringify(todos.list))
  localStorage.setItem('ACTIVE', todos.active)
})
</script>

<template>
  <section class="todoapp">
    <TodoHeader />
    <TodoMain />
    <TodoFooter />
  </section>
</template>
